﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>Initialize the jqxListBox from Array</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../../scripts/demos.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [{
                    label: "Peppermint Hot Chocolate",
                    value: "Chocolate Beverage",
                    group: "Hot Chocolate"
                }, {
                    label: "Salted Caramel Hot Chocolate",
                    value: "Chocolate Beverage",
                    group: "Hot Chocolate"
                 }, {
                    label: "White Hot Chocolate",
                    value: "Chocolate Beverage",
                    group: "Hot Chocolate"
                 }, {
                    label: "Caffe Americano",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Caffe Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Caffe Mocha",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Cappuccino",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Caramel Brulee Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Caramel Macchiato",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Peppermint Hot Chocolate",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Cinnamon Dolce Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Eggnog Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Espresso",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Espresso Con Panna",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Espresso Macchiato",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Flavored Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Gingerbread Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "White Chocolate Mocha",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Skinny Peppermint Mocha",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Skinny Flavored Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Pumpkin Spice Latte",
                    value: "Espresso Beverage",
                    group: "Espresso"
                }, {
                    label: "Caffe Vanilla Frappuccino",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Caffe Vanilla Frappuccino Light",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Caramel Brulee Frappuccino",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Caramel Brulee Frappuccino Light",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Eggnog Frappuccino",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Mocha Frappuccino",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }, {
                    label: "Tazo Green Tea Creme Frappuccino",
                    value: "Frappuccino Blended Beverage",
                    group: "Frappuccino"
                }]

                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ source: source, width: 300, height: 300});
                
                // update events.
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);

                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
    </div>
</body>
</html>
